import React from 'react';
import { Grid, Row, Col, Form } from 'react-bootstrap';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

import CheckButtons from '../../components/form/CheckButtons';
import FieldGroup from '../../components/form/FieldGroup';
import { businessTypeList, timeTypeList, batchTableCols } from './data-conf';

function getTabelData(businessType, timeType, batchId) {
  const data = [];
  for (let i = 0; i < 10; i += 1) {
    const id = (Math.random() * 100).toFixed(0).toString();
    data.push({
      batchId: batchId !== '' ? `${batchId}${id}` : (Math.random() * 100000).toFixed(0).toString(),
      businessType: businessType !== '' ? businessType : 'all',
      exeStartTime: '2018-05-22T14:21:05+0800',
      exeEndTime: '2018-05-24T14:21:05+0800',
      exeResult: '成功',
    });
  }
  return data;
}

export default class ExeBatch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      businessType: '',
      timeType: '',
      batchId: '',
    };
  }

  handleBusinessTypeChange(businessType) {
    this.setState({
      businessType,
    });
  }

  handleTimeTypeChange(timeType) {
    this.setState({
      timeType,
    });
  }

  handleBatchIdChange(batchId) {
    this.setState({
      batchId,
    });
  }

  render() {
    const { businessType, timeType, batchId } = this.state;
    return (
      <Grid>
        <Row>
          <Col xs={12} md={4} lg={3}>
            <CheckButtons
              type="radio"
              data={businessTypeList({ hasError: true })}
              name="businessType"
              onChange={v => this.handleBusinessTypeChange(v)}
            />
          </Col>
          <Col xs={12} md={4} lg={3}>
            <CheckButtons
              type="radio"
              data={timeTypeList}
              name="timeType"
              defaultValue="12h"
              onChange={v => this.handleTimeTypeChange(v)}
            />
          </Col>
          <Col xs={12} md={4} lg={3}>
            <Form inline>
              <FieldGroup
                id="batchId"
                label="批次号："
                onChange={e => this.handleBatchIdChange(e.target.value)}
              />
            </Form>
          </Col>
        </Row>
        <Row>
          <BootstrapTable id="ExeBatchTable" data={getTabelData(businessType, timeType, batchId)} striped hover>
            {
              (batchTableCols()).map(e => (
                <TableHeaderColumn
                  isKey={e.isKey}
                  dataField={e.dataField}
                  key={e.dataField}
                >
                  {e.name}
                </TableHeaderColumn>
              ))
            }
          </BootstrapTable>
        </Row>
      </Grid>
    );
  }
}
